<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.txtcolor{
			color: red;
		}
		.bgcolor{
			background: pink;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1 class="txtcolor bgcolor">我是标题</h1>
		<!-- class的属性绑定：类一直存在，通过绑定class属性控制class名是否在元素使用 -->
		<h1 :class="flag">vue控制标题</h1>
		<!-- flag是仿作变量：直接使用某一种样式 -->
		<h4 :class="'txtcolor'">vue标题</h4>
		<!-- txtcolor直接当做字符串来解析 -->
		<h4 :class="st">vue标题</h4>
		<!-- flag是仿作变量：直接使用某几种样式 -->
		<h4 :class="['txtcolor','bgcolor']">vue标题</h4>
		
		<h4 :class="{txtcolor:apply,bgcolor:apply2}">vue标题</h4>
		
		<h1 :class="id===1?'txtcolor' : 'bgcolor'">vue标题</h1>
	</div>
	
	
	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		let myApp = new Vue({
			el:'#app',
			data:{
				flag:'txtcolor',
				st:['txtcolor','bgcolor'],
				apply:true,
				apply2:false,
				id:1
				
			},
			methods:{
				
			}
		})
		
	</script>
</body>
</html>